import axios from "axios";
import React, { useEffect, useState } from "react";
import { Tabs, Sidebar, Image } from "react-vant";
import { Recommend } from "../../components";
const Index: React.FC = () => {
  const [tab, setTab] = useState<any>([]);

  useEffect(() => {
    axios.get("/api/tab").then((resp) => {
      setTab(resp.data.data);
      console.log(resp.data.data);
    });
  }, []);
  return (
    <div>
      <Tabs sticky defaultActive={1}>
        <Tabs.TabPane key={1} title="活动">
          1
        </Tabs.TabPane>
        <Tabs.TabPane key={2} title="推荐">
          <Recommend></Recommend>
        </Tabs.TabPane>
        <Tabs.TabPane key={3} title="专题">
          3
        </Tabs.TabPane>
        <Tabs.TabPane key={4} title="爱鸟">
          4
        </Tabs.TabPane>
        <Tabs.TabPane key={5} title="简述FM">
          <Sidebar>
            {tab
              .map((v: any) => {
                return (
                  <Sidebar.Item
                    key={v.id}
                    contentStyle={{
                      backgroundColor: "#fff",
                      padding: "18px 10px",
                    }}
                    title={v.title}
                  >
                    {v.children.map((v: any) => {
                      return (
                        <dl key={v.id} className="list-item">
                          <dt>
                            <Image src={v.url} alt="" width={120} height={80} lazyload/>
                          </dt>
                          <dd>
                            <h3>{v.title}</h3>
                            <p>{v.desc}</p>
                          </dd>
                        </dl>
                      );
                    })}
                  </Sidebar.Item>
                );
              })}
          </Sidebar>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default Index;
